import React, { Component } from "react";
class Live1 extends Component {
  state = { isleve3: false };
  render() {
    return (
      <div>
        {this.state.isleve3 ? <Live3></Live3> : <Live2></Live2>}

        <button
          onClick={() => {
            this.setState({ isleve3: true });
          }}
        >
          点击切换组件到Live3
        </button>
      </div>
    );
  }
}

export default Live1;

class Live2 extends Component {
  state = {};
  interHander = null;
  render() {
    return <div>live2</div>;
  }

  componentDidMount() {
    this.interHander = setInterval(() => {}, 1000);
  }

  // 卸载时的钩子函数
  componentWillUnmount() {
    console.log("componentWillUnmount");
    //   清除定时器
    clearInterval(this.interHander);
  }
}

class Live3 extends Component {
  state = {};
  render() {
    return <div>Live3</div>;
  }
}
